<template>
  <component
    :is="iconComponent"
    :size="size"
    :color="color"
    :fill="fill"
    :stroke-width="strokeWidth"
    :icon-class="iconClass" />
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import StarIcon from './StarIcon.vue';
  import HeartIcon from './HeartIcon.vue';
  import TrendingIcon from './TrendingIcon.vue';
  import NewIcon from './NewIcon.vue';

  interface Props {
    name: string;
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#F76B1B',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });

  // 图标映射
  const iconMap = {
    star: StarIcon,
    heart: HeartIcon,
    trending: TrendingIcon,
    new: NewIcon,
  };

  // 动态计算图标组件
  const iconComponent = computed(() => {
    return iconMap[props.name as keyof typeof iconMap] || StarIcon;
  });
</script>
